---
title: Details Lists
description: Responsive and customizable details list components for displaying structured data. Built with Tailwind CSS v4, these lists feature striped rows, borders, and dark mode support for modern web applications and dashboards. Optimized for SEO, accessibility, and mobile usability.
emoji: 🪪
container: p-6 max-w-3xl mx-auto
terms:
  - data
  - details
  - list
components:
  - { title: 'Base', dark: true }
  - { title: 'Striped', dark: true }
  - { title: 'Bordered', dark: true }
  - { title: 'Striped and bordered', dark: true }
---

# Details List Components

<p>{frontmatter.description}</p>

<CollectionList componentsData={componentsData} />
